<!-- src/components/FileUpload.vue -->
<template>
  <div class="file-upload">
    <label
      class="upload-area"
      :class="{ dragging }"
      @dragover.prevent
      @dragenter="dragging = true"
      @dragleave="dragging = false"
      @drop="handleDrop"
    >
      <input
        type="file"
        :accept="accept"
        :multiple="maxFiles > 1"
        @change="handleFileSelect"
        ref="fileInput"
        hidden
      />
      <div @click="$refs.fileInput?.click()">
        <p>📁 点击选择文件 或 拖拽到此处</p>
        <p class="hint">
          支持 {{ accept }}，单个文件不超过 {{ (maxSize / 1024 / 1024).toFixed(0) }}MB
        </p>
      </div>
    </label>

    <!-- 文件列表 -->
    <div v-if="files.length" class="file-list">
      <div v-for="(file, index) in files" :key="index" class="file-item">
        <img v-if="previews[index]" :src="previews[index]" alt="预览" class="preview" />
        <div class="file-info">
          <strong>{{ file.name }}</strong>
          <span>{{ (file.size / 1024).toFixed(1) }} KB</span>
        </div>
        <button @click="removeFile(index)" class="remove-btn">×</button>
      </div>
    </div>

    <!-- 上传状态 -->
    <div v-if="uploadStatus.uploading" class="upload-status">
      <progress :value="uploadStatus.progress" max="100"></progress>
      <span>上传中... {{ uploadStatus.progress }}%</span>
    </div>
    <div v-else-if="uploadStatus.success" class="upload-status success">✅ 上传成功！</div>
    <div v-else-if="uploadStatus.error" class="upload-status error">
      ❌ {{ uploadStatus.error }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useFileUpload } from '@/composables/useFileUpload.js'

const props = defineProps({
  accept: { type: String, default: 'image/*' },
  maxFiles: { type: Number, default: 5 },
  maxSize: { type: Number, default: 5 * 1024 * 1024 },
})

const dragging = ref(false)

// 使用组合式函数
const { files, previews, uploadStatus, addFiles, removeFile, upload, reset } = useFileUpload(props)

// 暴露方法给父组件
defineExpose({ upload, reset, files })

// 文件选择
const fileInput = ref(null)
const handleFileSelect = (e) => {
  if (e.target.files.length) {
    addFiles(e.target.files)
    e.target.value = '' // 允许重复选择同一文件
  }
}

// 拖拽上传
const handleDrop = (e) => {
  e.preventDefault()
  dragging.value = false
  if (e.dataTransfer.files.length) {
    addFiles(e.dataTransfer.files)
  }
}
</script>

<style scoped>
.file-upload {
  width: 100%;
}
.upload-area {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}
.upload-area.dragging {
  border-color: #42b883;
  background-color: #f0fdf4;
}
.hint {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}
.file-list {
  margin-top: 16px;
}
.file-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 8px;
}
.preview {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 12px;
}
.file-info {
  flex: 1;
  font-size: 14px;
}
.remove-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #e53e3e;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-status {
  margin-top: 16px;
  padding: 8px;
  border-radius: 4px;
}
.upload-status.success {
  background: #e6ffed;
  color: #2f855a;
}
.upload-status.error {
  background: #fed7d7;
  color: #e53e3e;
}
progress {
  width: 100%;
  height: 6px;
  margin-bottom: 4px;
}
</style>
